<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-选择出发时间弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-modal-departure-time" @click.stop>
		<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
			<view class="popup-box">
				<view class="popup-header">
					<view class="title">请选择出发时间</view>
					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
				</view>
				<view class="popup-content">
					<view class="content-tips">提前预约用车更优惠</view>
					<view class="content-picker">
						<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" :value="selectValue" @change="handleChange">
							<picker-view-column>
								<view class="picker-column" v-for="(item, index) in dayList" :key="index">{{item.label}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-column" v-for="(item, index) in hourList" :key="index">{{item.label}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-column" v-for="(item, index) in minuteList" :key="index">{{item.label}}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="popup-btn">
					<view class="btn" :style="{background: themeColor}" @click="onConfirm">确认出发时间</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentModalDepartureTime",
		props: {
			// 弹窗类型 1.不包含现在出发，2.包含现在出发
			showType: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				// 日期列表
				dayList: [],
				// 小时列表
				hourList: [],
				// 分钟列表
				minuteList: [],
				// 已选数据
				selectValue: [0, 0, 0],
				// 最小可选时间
				minSelectTime: [],
			};
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		mounted() {
			this.getDayList()
			this.getHourList()
			this.getMinuteList()
			this.selectValue = [0, 0, 0]
		},
		methods: {
			// 打开模态框
			open(value) {
				let startDate = this.minSelectTime = this.$util.getAfterDate(this.$util.getCurrentDate(), 5, 25, "y,m,d,h,i").split(",")
				if (parseInt(startDate[4]) % 5 != 0) {
					let tempDate = new Date(`${startDate[0]}/${startDate[1]}/${startDate[2]} ${startDate[3]}:${startDate[4]}`)
					tempDate.setMinutes(tempDate.getMinutes() + Number(5 - parseInt(startDate[4]) % 5))
					startDate = this.minSelectTime = this.$util.getFormatDate(tempDate.getTime(), "y,m,d,h,i").split(",")
				}
				let nowDate = this.$util.getCurrentDate("y-m-d")
				if (nowDate == `${startDate[0]}-${startDate[1]}-${startDate[2]}`) this.getDayList()
				else this.getDayList(1)
				if (value && value.day && value.hour && value.minute) {
					let dataValue1 = this.$util.getTimeStamp(value.day + " 00:00")
					let dataValue2 = this.$util.getTimeStamp(`${startDate[0]}/${startDate[1]}/${startDate[2]} 00:00`)
					if (dataValue1 > dataValue2) {
						this.getHourList()
						this.getMinuteList()
					} else if (this.showType == 2 && dataValue1 < dataValue2) {
						this.hourList = [{
							label: "现在出发",
							value: -1
						}]
						this.minuteList = []
					} else if (parseInt(value.hour) != parseInt(startDate[3])) {
						this.getHourList(parseInt(startDate[3]))
						this.getMinuteList()
						if (this.showType == 2 && value.isToday) this.hourList.unshift({
							label: "现在出发",
							value: -1
						})
					} else {
						this.getHourList(parseInt(startDate[3]))
						this.getMinuteList(parseInt(startDate[4]))
						if (this.showType == 2 && value.isToday) this.hourList.unshift({
							label: "现在出发",
							value: -1
						})
					}
					let dayIndex = this.dayList.findIndex(item => item.value == value.day)
					let hourIndex = this.hourList.findIndex(item => item.value == value.hour)
					let minuteIndex = this.minuteList.findIndex(item => item.value == value.minute)
					this.$nextTick(() => {
						this.selectValue = [dayIndex, hourIndex, minuteIndex]
					})
				} else {
					let dataValue1 = this.$util.getTimeStamp(nowDate + " 00:00")
					let dataValue2 = this.$util.getTimeStamp(`${startDate[0]}/${startDate[1]}/${startDate[2]} 00:00`)
					if (this.showType == 2 && dataValue1 < dataValue2) {
						this.hourList = [{
							label: "现在出发",
							value: -1
						}]
						this.minuteList = []
					} else {
						this.getHourList(parseInt(startDate[3]), 0)
						if (this.showType == 2) this.minuteList = []
						else this.getMinuteList(parseInt(startDate[4]))
					}
					this.selectValue = [0, 0, 0]
				}
				this.$refs.popupModal.open()
			},
			// 获取日期列表
			getDayList(type) {
				this.dayList = []
				let list = this.$util.getDateGroup(this.$util.getCurrentDate(), getApp().globalData.appointmentDays, "y-M-D")
				for (let i = 0; i < list.length; i++) {
					if (this.showType == 1 && type == 1 && i == 0) continue;
					let showData = list[i].split("-")
					let label = ""
					if (i === 0) {
						label = '今天';
					} else if (i === 1) {
						label = `${parseInt(showData[1])}月${parseInt(showData[2])}日 明天`;
					} else if (i === 2) {
						label = `${parseInt(showData[1])}月${parseInt(showData[2])}日 后天`;
					} else {
						label = `${parseInt(showData[1])}月${parseInt(showData[2])}日`;
					}
					this.dayList.push({
						label,
						value: list[i],
						isToday: i === 0
					})
				}
			},
			// 获取小时列表
			getHourList(startHour = 0, dayIndex) {
				this.hourList = []
				if (this.showType == 2 && dayIndex == 0) {
					this.hourList.push({
						label: "现在出发",
						value: -1
					})
				}
				for (let i = parseInt(startHour); i < 24; i++) {
					this.hourList.push({
						label: String(i <= 9 ? ("0" + i) : i) + "点",
						value: String(i <= 9 ? ("0" + i) : i),
					})
				}
			},
			// 获取分钟列表
			getMinuteList(startMinute = 0) {
				this.minuteList = []
				for (let i = parseInt(startMinute); i < 60; i = i + 5) {
					this.minuteList.push({
						label: String(i <= 9 ? ("0" + i) : i) + "分",
						value: String(i <= 9 ? ("0" + i) : i),
					})
				}
			},
			// 关闭弹窗
			onClose() {
				this.$refs.popupModal.close()
			},
			// 改变事件
			onChange(e) {
				this.$emit("onChange", e.show)
			},
			// 数据改变
			handleChange(e) {
				let originalData = {
					date: this.dayList[this.selectValue[0]].value,
					hour: this.hourList[this.selectValue[1]].value,
					minute: this.hourList[this.selectValue[1]].value == -1 ? "00" : this.minuteList[this.selectValue[2]].value,
				}
				let dateIndex = 0
				let hourIndex = 0
				let minuteIndex = 0
				if (this.selectValue[0] != e.target.value[0]) {
					let dataValue1 = this.$util.getTimeStamp(this.dayList[e.target.value[0]].value + " 00:00:00")
					let dataValue2 = this.$util.getTimeStamp(`${this.minSelectTime[0]}/${this.minSelectTime[1]}/${this.minSelectTime[2]} 00:00:00`)
					if (dataValue1 == dataValue2) {
						this.getHourList(parseInt(this.minSelectTime[3]), e.target.value[0])
						hourIndex = this.hourList.findIndex(item => item.value == originalData.hour)
						hourIndex = hourIndex == -1 ? 0 : hourIndex
						if (this.hourList[hourIndex].value == -1) {
							this.minuteList = []
						} else if (parseInt(this.hourList[hourIndex].value) == parseInt(this.minSelectTime[3])) {
							this.getMinuteList(parseInt(this.minSelectTime[4]))
						} else {
							this.getMinuteList()
						}
					} else if (this.showType == 2 && dataValue1 < dataValue2) {
						this.hourList = [{
							label: "现在出发",
							value: -1
						}]
						this.minuteList = []
					} else {
						this.getHourList()
						this.getMinuteList()
					}
					dateIndex = e.target.value[0]
					hourIndex = this.hourList.findIndex(item => item.value == originalData.hour)
					hourIndex = hourIndex == -1 ? 0 : hourIndex
					minuteIndex = this.hourList[hourIndex].value == -1 ? 0 : this.minuteList.findIndex(item => item.value == originalData.minute)
				} else if (this.selectValue[1] != e.target.value[1]) {
					let dataValue1 = this.$util.getTimeStamp(this.dayList[this.selectValue[0]].value + " 00:00:00")
					let dataValue2 = this.$util.getTimeStamp(`${this.minSelectTime[0]}/${this.minSelectTime[1]}/${this.minSelectTime[2]} 00:00:00`)
					if (dataValue1 == dataValue2) {
						if (this.hourList[e.target.value[1]].value == -1) {
							this.minuteList = []
						} else if (parseInt(this.hourList[e.target.value[1]].value) == parseInt(this.minSelectTime[3])) {
							this.getMinuteList(parseInt(this.minSelectTime[4]))
						} else {
							this.getMinuteList()
						}
					} else {
						this.getMinuteList()
					}
					dateIndex = e.target.value[0]
					hourIndex = e.target.value[1]
					minuteIndex = this.minuteList.findIndex(item => item.value == originalData.minute)
				} else {
					dateIndex = e.target.value[0]
					hourIndex = e.target.value[1]
					minuteIndex = e.target.value[2]
				}
				this.$nextTick(() => {
					this.selectValue = [dateIndex == -1 ? 0 : dateIndex, hourIndex == -1 ? 0 : hourIndex, minuteIndex == -1 ? 0 : minuteIndex]
				})
			},
			// 确认选择
			onConfirm() {
				if (this.hourList[this.selectValue[1]].value == -1) {
					this.$emit("confirm", -1)
				} else {
					this.$emit("confirm", {
						dayName: this.dayList[this.selectValue[0]].label,
						day: this.dayList[this.selectValue[0]].value,
						hour: this.hourList[this.selectValue[1]].value,
						minute: this.minuteList[this.selectValue[2]].value,
						isToday: this.dayList[this.selectValue[0]].isToday,
					})
				}
				this.onClose()
			},
		},
	}
</script>

<style lang="scss">
	.component-modal-departure-time {
		position: relative;
		z-index: 999;

		.popup-box {
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0 0;
			padding: 48rpx 48rpx 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.popup-header {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					color: #242629;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					flex: 1;
				}

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.popup-content {
				display: flex;
				flex-direction: column;

				.content-tips {
					color: #8D929C;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					margin-top: 16rpx;
				}

				.content-picker {
					padding: 32rpx 0;
					display: block;

					.picker-view {
						height: 180px;
						flex: 1;

						.picker-column {
							line-height: 50px;
							text-align: center;
							font-size: 28rpx;
						}
					}
				}
			}

			.popup-btn {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-top: 1rpx solid #F6F7FB;
				padding: 16rpx 32rpx;

				.btn {
					width: 100%;
					color: #FFF;
					text-align: center;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					border-radius: 48rpx;
					padding: 28rpx 32rpx;
				}
			}
		}
	}
</style>